<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-07-30 20:02:30
 * @LastEditTime: 2020-02-28 11:25:38
 * @LastEditors: Please set LastEditors
 -->
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title></title>
    <link rel="stylesheet" type="text/css" href="../css/vant.css">
    <link rel="stylesheet" type="text/css" href="../css/base.css" />
    <script type="text/javascript" src="../script/vue.min.js"></script>
    <script type="text/javascript" src="../script/vant.min.js"></script>
    <script type="text/javascript" src="../script/base.js"></script>
    <script type="text/javascript" src="../script/jquery.js"></script>
    <script type="text/javascript" src="../script/ajaxFileUpload.js"></script>
    <script type="text/javascript" src="../script/layer/mobile/layer.js"></script>
    <style type="text/css">
        .content {
            display: flex;
            flex-direction: column;
        }

        .mainForm {
            display: flex;
            flex-wrap: wrap;
            background-color: #fff;
        }

        .mainForm .van-field {
            width: 50%;
        }

        .van-field__label {
            width: auto;
        }

        .subForm {
            flex: 1;
            overflow-y: auto;
            padding: 10px;
            display: flex;
            flex-direction: column;
            background-color: #fff;
            border-radius: 8px;
            margin: 6px;
            align-items: center;
            height: 55px;
        }

        .subFormItem {
            display: flex;
            width: 100%;
            justify-content: space-between;
            padding-bottom: 10px;
            align-items: center;

        }

        .subFormItem .van-field {
            flex: 1;
        }

        .subFormItem .van-cell {
            background-color: transparent;
        }

        .number {
            margin-left: 6px;
            line-height: 44px;
            display: flex;
        }

        .number span {
            margin: auto;
            display: inline-block;
            width: 1.5em;
            height: 1.5em;
            line-height: 1.5em;
            background-color: #1989fa;
            border-radius: 50%;
            color: #fff;
            text-align: center;
        }


        .van-cell {
            width: 50%;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="box">
            <van-nav-bar :title="name + '明细'" id="safeTop" left-arrow @click-left="onClickLeft">
            </van-nav-bar>
            <div class="content">
                <div class="mainForm">
                    <van-field v-model="formData.OperateDate" label="日期：" placeholder="自动带出日期" readonly></van-field>
                    <van-field v-model="formData.CJ" label="产间：" placeholder="自动带出产间" readonly></van-field>
                </div>
                <div class="subForm">
                    <div class="subFormItem" v-for=" (item, index) in tableData">
                        <div class="number">
                            <span>{{index + 1}}</span>
                        </div>
                        <div style="width: 250px;">
                            <van-field style="width: 100%;" v-model="item.ProductName" label="型号：" placeholder="型号"
                                readonly>
                            </van-field>
                        </div>
                        <div style="width: 250px;">
                            <van-field style="width: 100%;" v-model="item.Qty" label="计划数量：" placeholder="计划数量"
                                readonly>
                            </van-field>
                        </div>
                        <div style="width: 250px;">
                            <van-field style="width: 100%;" v-model="item.FinishedQty" label="完成数量：" placeholder="完成数量"
                                readonly>
                            </van-field>
                        </div>
                    </div>
                </div>

            </div>
            <audio id="audioPlayer" preload="auto">
                <source src="../image/aigei_com.mp3" type="audio/mpeg">
            </audio>
            <div class="indexBottom">
                汇智云创 技术支持
            </div>
        </div>
    </div>
</body>

<script type="text/javascript">
    var vm;
    apiready = function () {
        var photoBrowser = api.require('photoBrowser');

        api.addEventListener({
            name: 'getCDAlarmLList'
        }, function (ret) {
            APP.getCDAlarmLList()
        })
        api.addEventListener({
            name: 'getYCKBDataLiist'
        }, function (ret) {
            APP.getYCKBDataLiist()
        })
        vm = new Vue({
            el: '#app',
            data: {
                name: api.pageParam.name,
                formData: {
                    PlanID: '',
                    OperateDate: '',
                    CJ: ''
                },
                tableData: [],
            },
            created: function () {
                var that = this;
                window.localStorage.setItem('pageName', JSON.stringify(that.name))
                if (api.pageParam.PlanID) {
                    APP.ajax('getCDPlanDetail', { PlanID: api.pageParam.PlanID }, function (res) {
                        console.log(JSON.stringify(res));
                        that.formData = res.ds[0]
                        that.formData.OperateDate = that.formData.OperateDate ? that.formData.OperateDate.split('T')[0] : ''
                        that.tableData = res.ds1
                    })
                }
                else {
                    that.formData = api.pageParam.obj.ds[0]
                    that.formData.OperateDate = that.formData.OperateDate ? that.formData.OperateDate.split('T')[0] : ''
                    that.tableData = api.pageParam.obj.ds1
                }

            },
            mounted() {
                APP.setSafeTop()
                APP.keyBoardChange()
            },
            methods: {

                onClickLeft() {
                    var that = this
                    api.sendEvent({
                        name: 'refreshAssembleFormList'
                    })
                    api.closeWin()
                },
            }
        })
    };
</script>

</html>